<script setup lang="ts">
import { ref, watch, computed } from "vue";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  ruleData: {
    type: Object,
    default: () => ({})
  },
  mode: {
    type: String,
    default: "view" // view-查看, edit-编辑, create-新建
  }
});

const emit = defineEmits(["update:visible", "submit"]);

const formData = ref({
  condition: "",
  effectiveTime: [],
  notifyPerson: "",
  ruleName: ""
});

// 监听 ruleData 变化，更新表单数据
const updateFormData = () => {
  if (props.mode === "create") {
    formData.value = {
      condition: "",
      effectiveTime: [],
      notifyPerson: "",
      ruleName: ""
    };
  } else {
    formData.value = {
      ...props.ruleData
    };
  }
};

// 当 visible 或 ruleData 变化时更新表单数据
watch([() => props.visible, () => props.ruleData], () => {
  if (props.visible) {
    updateFormData();
  }
});

const closeDialog = () => {
  emit("update:visible", false);
};

const handleSubmit = () => {
  emit("submit", formData.value);
  closeDialog();
};

const dialogTitle = computed(() => {
  const titles = {
    view: "规则详情",
    edit: "编辑规则",
    create: "新建规则"
  };
  return titles[props.mode] || "规则详情";
});

const isReadOnly = computed(() => props.mode === "view");
</script>

<template>
  <el-dialog
    :title="dialogTitle"
    :model-value="visible"
    width="800px"
    @update:model-value="closeDialog"
  >
    <div class="rule-detail">
      <div class="section">
        <h3 class="section-title">条件和操作</h3>
        <div class="section-content">
          <el-form label-width="100px">
            <el-form-item label="当以下条件满足时：">
              <el-radio-group
                v-model="formData.condition"
                :disabled="isReadOnly"
              >
                <el-radio label="1">每天</el-radio>
                <el-radio label="2">每周</el-radio>
                <el-radio label="3">每月</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <div class="section">
        <h3 class="section-title">持续时间</h3>
        <div class="section-content">
          <el-form label-width="100px">
            <el-form-item label="生效时间：">
              <el-date-picker
                v-model="formData.effectiveTime"
                type="daterange"
                :disabled="isReadOnly"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
            <el-form-item label="通知人员：">
              <el-input
                v-model="formData.notifyPerson"
                :disabled="isReadOnly"
              />
            </el-form-item>
          </el-form>
        </div>
      </div>

      <div class="section">
        <h3 class="section-title">规则名称</h3>
        <div class="section-content">
          <el-form label-width="100px">
            <el-form-item label="规则名称：">
              <el-input v-model="formData.ruleName" :disabled="isReadOnly" />
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button v-if="!isReadOnly" type="primary" @click="handleSubmit">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.rule-detail {
  padding: 20px;

  .section {
    margin-bottom: 30px;
    border: 1px solid #ebeef5;
    border-radius: 4px;

    .section-title {
      padding: 12px 20px;
      margin: 0;
      font-size: 16px;
      font-weight: 500;
      background-color: #f5f7fa;
      border-bottom: 1px solid #ebeef5;
    }

    .section-content {
      padding: 20px;
    }
  }
}

.dialog-footer {
  .el-button {
    min-width: 100px;
  }
}
</style>
